import React, { Component } from 'react'
import { View, Button, Text, Canvas } from '@tarojs/components'
import { observer, inject } from 'mobx-react'
import { computed, observable } from 'mobx'

import './index.less'


@inject('store')
@observer
class Index extends Component {

  @observable  test = 1;

  @computed get computedValue() {
    return `${this.test}-test`
  }

  componentWillMount () { }

  componentDidMount () {
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  increment = () => {
    const { counterStore } = this.props.store
    counterStore.increment()
    this.test += 1
  }

  decrement = () => {
    const { counterStore } = this.props.store
    counterStore.decrement()
    this.test -= 1
  }

  incrementAsync = () => {
    const { counterStore } = this.props.store
    counterStore.incrementAsync()
  }

  render () {
    const { counterStore: { counter } } = this.props.store
    return (
      <View className='index'>
        <View>{ this.test }</View>
        <View>{ this.computedValue }</View>
        <Button onClick={this.increment}>+</Button>
        <Button onClick={this.decrement}>-</Button>
        <Button onClick={this.incrementAsync}>Add Async</Button>
        <Text>{counter}</Text>
      </View>
    )
  }
}

export default Index
